<template>
    <search></search>
  <div class="carousel-container">
    <el-carousel :interval="4000" height="400px">
      <el-carousel-item v-for="(item, index) in carouselItems" :key="index">

        <div class="carousel-image-container">
          <el-image
            :src="item.adImage"
            :alt="item.title"
            class="carousel-image"
            @click="handleClick(item.adImage)"
          >
          
        </el-image>
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>
  <fenlei></fenlei>
  <shangjia></shangjia>
    <qiugou></qiugou>
  <tupian></tupian>
  <dibu></dibu>
</template>

<script setup>
import { ref } from 'vue'
import axios, { all } from 'axios'
import { onMounted } from 'vue'
import { useCounterStore } from '@/stores/counter'
import tupian from '@/components/tupian.vue'
import qiugou from '@/components/shouye/qiugou.vue'
import dibu from '@/components/shouye/dibu.vue'
import shangjia from '@/components/shouye/shangjia.vue'
import fenlei from '@/components/shouye/fenlei.vue'
import search from '@/components/shouye/search.vue'

const carouselItems = ref([]) 
const store = useCounterStore()

// 获取轮播图数据
const getCarouselData = async () => {

  try {
    const res = await axios.get('advertisement/advertisementlist')
    carouselItems.value = res.data.data.list
  } catch (error) {
    console.error("获取轮播图数据失败:", error)
  }

}
const handleClick=(item) => {
  console.log(item)
}
// 页面加载时调用接口
onMounted(() => {
  getCarouselData()
})
</script>

<style scoped>
/* 关键样式 */
.carousel-image-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.carousel-image {
  object-fit: cover;  /* 保持比例覆盖容器 */
  width: 100%;
  height: 100%;
}
.carousel-container {
  width: 100%;
  min-height: 300px;
  position: relative;
}

.el-carousel {
  width: 100%;
}

.el-carousel__container {
  height: 300px !important;
}

.el-carousel__item h3 {
  color: #fff;
  font-size: 24px;
  margin-bottom: 20px;
}

.el-carousel__item p {
  color: #fff;
  font-size: 16px;
  opacity: 0.8;
}
</style>
